<template>
  <div class="rich-text-editor">
    <!-- 左侧控件 -->
    <div class="sidebar">
      <h3>拖拽控件</h3>
      <div
        v-for="(item, index) in widgets"
        :key="index"
        class="draggable"
        draggable="true"
        @dragstart="onDragStart($event, item)"
      >
        {{ item.label }}
      </div>
    </div>

    <!-- 右侧编辑器区域 -->
    <div class="editor-wrapper">
      <div class="editor-container">
        <TinymceEditor v-model="innerValue" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import TinymceEditor from './TinymceEditor.vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['update:modelValue'])

const innerValue = ref(props.modelValue)
watch(innerValue, (val) => emit('update:modelValue', val))
watch(() => props.modelValue, (val) => { innerValue.value = val })

// 控件库
const widgets = [
  {
    label: '📊 表格',
    html: '<table border="1" style="width:100%"><tr><td>单元格</td><td>单元格</td></tr></table>'
  },
  {
    label: '📝 标题',
    html: '<h1>这是一个标题</h1>'
  },
  {
    label: '📷 图片',
    html: '<img src="https://via.placeholder.com/150" alt="示例图片" />'
  }
]

const onDragStart = (event, item) => {
  event.dataTransfer.setData('text/html', item.html)
}
</script>

<style scoped>
.rich-text-editor {
  display: flex;
  width: 100%;
  height: 100vh;
}

/* 左侧控件区宽度 400px */
.sidebar {
  width: 400px;
  border-right: 1px solid #ddd;
  padding: 10px;
  overflow-y: auto;
}

/* 包裹编辑器的区域（居中显示用） */
.editor-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  overflow-y: auto;
}

.editor-container {
  width: 900px;
  max-width: 100%;
  flex: 1;
  min-height: 0;   /* 🔥 必须！！！否则子元素高度继承不到 */
  display: flex;
  flex-direction: column;
}

.draggable {
  padding: 8px;
  margin-bottom: 6px;
  border: 1px solid #aaa;
  background: #f9f9f9;
  cursor: grab;
}
</style>
